<%layout("/common/layout.html"){%>

<style>
    .get {
        background: #1E5B94;
        color: #fff;
        text-align: center;
        padding: 100px 0;
    }

    .get-title {
        font-size: 400%;
        border: 2px solid #fff;
        padding: 20px;
        display: inline-block;
    }

    .get-info{
        font-size: 200%;
    }

    .get-btn {
        background: #fff;
    }

    .detail {
        background: #fff;
    }

    .detail-h2 {
        text-align: center;
        font-size: 150%;
        margin: 40px 0;
    }

    .detail-h3 {
        color: #1f8dd6;
    }

    .detail-p {
        color: #7f8c8d;
    }

    .detail-mb {
        margin-bottom: 30px;
    }

    .footer p {
        color: #7f8c8d;
        margin: 0;
        padding: 15px 0;
        text-align: center;
        background: #2d3e50;
    }
</style>

<div class="get">
    <div class="am-g">
        <div class="am-u-lg-12">
            <h1 class="get-title am-animation-fade">
                <img src="${base}/img/logo.png" style="height: 100px"> 腾书房 </h1>

            <p class="get-info am-animation-fade">
                以书会友-以书交友
            </p>

            <p>
                <a href="${base}/addBook" class="am-btn am-btn-sm get-btn am-animation-slide-bottom"> 我要摆书上架 </a>
            </p>
        </div>
    </div>
</div>

<div class="detail">
    <div class="am-g am-container">
        <div class="am-u-lg-12">
            <h1 class="detail-h2 am-animation-fade ">关于"腾书房"</h1>
            <div class="am-g am-animation-slide-right am-lg-text-center">
                <p>还在担心在二手书店买教材被坑钱?</p>
                <p>还在担心毕业后的书在外摊摆数天?</p>
                <p>想要用赠书结识兴趣相投的人?</p>
                <br>
                <h2>那你还在等什么</h2>
                <p>"腾书房"会给你你想要的一切</p>
            </div>
        </div>

        <br>

        <h1 class="detail-h2 am-animation-fade">最新上架</h1>

        <div class="am-u-md-12">


            <%for(book in books!){%>


            <a href="${base}/book?book=${book.id}">
                <div class="am-u-md-4">
                    <div class="am-thumbnail am-md-text-center">
                        <img class="book-img" src="${book.img}" alt=""/>

                        <div class="am-thumbnail-caption">
                            <h2>${book.name}</h2>
                            <%if(book.type==0){%>
                            <a class="am-badge am-badge-primary am-round am-text-lg">出售</a>
                            <%}else if(book.type==1){%>
                            <a class="am-badge am-badge-warning am-round am-text-lg">求购</a>
                            <%}else{%>
                            <a class="am-badge am-badge-success am-round am-text-lg">赠送</a>
                            <%}%>
                        </div>
                    </div>
                </div>
            </a>

            <%}%>
        </div>

    </div>
</div>

<%}%>